<template>
  <div class="container1">
    <!-- 客户信息-客户分析 -->
    <!-- 查询条件 -->
    <!-- <el-form :inline="true" class="tableSearchBox" size="medium">
      <el-form-item label="按月查询：">
        <el-date-picker v-model="search.time" type="month" format="yyyy-MM" value-format="yyyy-MM" placeholder="选择日期"
          :editable="false" :clearable="false"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getData">查询</el-button>
      </el-form-item>
    </el-form> -->
    <div class="mb20"></div>
    <el-row :gutter="15">
      <el-col :span="12">
        <el-card>
          <div class="echarts">
            <v-chart ref="chart1" :options="chartOption" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div class="echarts">
            <v-chart ref="chart2" :options="chartOption2" />
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div class="mb15"></div>
    <el-row :gutter="15">
      <el-col :span="12">
        <el-card>
          <div class="echarts">
            <v-chart ref="chart3" :options="chartOption3" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div class="echarts">
            <v-chart ref="chart4" :options="chartOption4" />
          </div>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        search: { //搜索条件
          time: "",
        },
        chartData: {}, //所有的图表数据
        chartOption: {},
        chartOption2: {},
        chartOption3: {},
        chartOption4: {},
      }
    },
    mounted() {
      this.getData();
      this.echartsResize(this.$refs);
    },
    beforeDestroy() {},
    created() {},
    methods: {
      getData() {
        const self = this;

        // self.$axios.post("/service/bsMeterUserStatistics").then(res => {
        //   if (res.data.status === "success") {
        var chartData = {
          waterRateRes: [{
              value: 11701,
              waterRateID: 1,
              name: "生活用水"
            },
            {
              value: 10,
              waterRateID: 3,
              name: "经营服务"
            },
            {
              value: 104,
              waterRateID: 5,
              name: "特种用水"
            },
            {
              value: 1093,
              waterRateID: 6,
              name: "非居民用水"
            },
            {
              value: 774,
              waterRateID: 7,
              name: "居民生活用水"
            },
            {
              value: 200,
              waterRateID: 8,
              name: "非生活用水"
            }
          ],
          tradeTypeRes: [{
              value: 5701,
              name: "生活"
            },
            {
              value: 1078,
              name: "餐饮"
            },
            {
              value: 1034,
              name: "美容美发"
            },
            {
              value: 1093,
              name: "洗浴"
            },
            {
              value: 2774,
              name: "洗车"
            },
            {
              value: 200,
              name: "普通商店"
            }
          ],
          meterReadCycleRes: [{
              value: 5701,
              name: "每月"
            },
            {
              value: 3078,
              name: "单月"
            },
            {
              value: 2834,
              name: "双月"
            }
          ],
          userStatus: [{
              value: 10857,
              name: "正常"
            },
            {
              value: 2718,
              name: "欠费"
            }
          ]
        };

        self.chartData = chartData;

        self.getChartData1();
        self.getChartData2();
        self.getChartData3();
        self.getChartData4();
        //
        //   } else {
        //     self.$message(res.data.res);
        //   }
        // });


      },
      getChartData1() {
        //获取图表数据
        const self = this;
        var options = {
          title: {
            left: "0",
            text: "各用水类型用户对比"
          },
          color: ["#ff7043", "#ffa726", "#9ccc65", "#5c6bc0", "#7e57c2", "#66bb6a", "#26a69a", "#26c6da", "#29b6f6",
            "#42a5f5", "#ffca28",
          ],
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c}户 ({d}%)'
          },
          legend: {
            orient: 'vertical',
            right: "0",
            bottom: "0"
          },
          series: [{
            name: '用水类型',
            type: 'pie',
            radius: ['50%', '70%'],
            top: 40,
            right: 100,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            },
            data: []
          }]
        }

        options.series[0].data = self.chartData.waterRateRes;

        self.chartOption = options;
      },
      getChartData2() {
        //获取图表数据
        const self = this;
        var options = {
          title: {
            left: "0",
            text: "抄表周期统计"
          },
          color: ["#ff7043", "#ffa726", "#ffca28", "#9ccc65", "#5c6bc0", "#7e57c2", "#66bb6a", "#26a69a", "#26c6da",
            "#29b6f6", "#42a5f5"
          ],
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c}户 ({d}%)'
          },
          legend: {
            orient: 'vertical',
            right: "0",
            bottom: "0"
          },
          series: [{
            name: '抄表周期',
            type: 'pie',
            radius: ['50%', '70%'],
            top: 40,
            // right:100,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            },
            data: []
          }]
        }
        options.series[0].data = self.chartData.meterReadCycleRes;
        self.chartOption2 = options;
      },
      getChartData3() {
        //获取图表数据
        const self = this;
        var options = {
          title: {
            left: "0",
            text: "各行业用户对比"
          },
          color: ["#26c6da", "#29b6f6", "#42a5f5", "#26a69a", "#66bb6a", "#9ccc65", "#5c6bc0", ],
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c}户 ({d}%)'
          },
          legend: {
            orient: 'vertical',
            right: "0",
            bottom: "0"
          },
          series: [{
            name: '行业类型',
            type: 'pie',
            radius: ['50%', '70%'],
            top: 40,
            right: 100,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            },
            data: []
          }]
        }
        options.series[0].data = self.chartData.tradeTypeRes;
        self.chartOption3 = options;
      },
      getChartData4() {
        //获取图表数据
        const self = this;
        var options = {
          title: {
            left: "0",
            text: "客户状态"
          },
          color: ["#66bb6a", "#ffa726"],
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c}户 ({d}%)'
          },
          legend: {
            orient: 'vertical',
            right: "0",
            bottom: "0"
          },
          series: [{
            name: '客户状态',
            type: 'pie',
            radius: ['50%', '70%'],
            top: 40,
            // right:100,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            },
            data: []
          }]
        }
        options.series[0].data = self.chartData.userStatus;
        self.chartOption4 = options;
      }
    }
  }
</script>
<style lang="scss" scoped>
  .echarts {
    width: 95%;
    height: 30vh;
    // min-height: 280px;
    margin: 10px auto;
  }
</style>